<template>
  <div class="cityHeader">
    <div class="upperPart">
      <!--返回Home页面的返回按钮-->
      <!--在此处使用两个<span>标签是因为需要inline性质使得他们在一行-->
      <router-link to="/">
        <span class="iconfont back-icon">&#xe658;</span>
      </router-link>
        <span class="title">城市选择</span>
    </div>
    <div class="citySearch">
      <a-input-search placeholder="城市名或拼音（如北京/beijing）" @search="onSearch" class="inputValue" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'CityHeader',
  methods: {
    onSearch (value) {
      console.log(value)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/commStyle.styl"
.cityHeader
  background: $bgColor
  margin-top: -1.2rem
  .upperPart
    line-height: 1rem
    .title
      padding-right: .8rem
      color: white
      font-size: .3rem
    .back-icon
      float: left
      padding: 0 .2rem
      /* 调整图标的大小 */
      font-size: .5rem
      color: white
  .citySearch
    line-height: 1rem
    padding: 0 .8rem
    .inputValue
      text-align: center
      padding-left: .2rem
      padding-right: .2rem
</style>
